<template>
    <u-popup :show="share_show" @close="share_show = false" mode="bottom" bgColor="transparent" z-index="9" iconColor='white' closeable>
        <view class="uni-share-con">
            <image style="width: 600rpx; margin: 100rpx auto 100rpx; display: block" mode="widthFix" :src="share_img"></image>
            <view class="fixedbottom">
                <button class="sharebutton2 u-reset-button flex-c-c" style="" @click="save2">
                    <u-icon name="/static/common/a_share_xiangce.png" size="40"></u-icon>
                    <view class="text">保存图片</view>
                </button>
                <!-- <button class="sharebutton2 u-reset-button flex-c-c" @click="savaWeixin">
                    <u-icon name="/static/common/a_share_weixin.png" size="40"></u-icon>
                    <view class="text">微信好友</view>
                </button> -->
                <!-- <button class="sharebutton2 flex-c-c u-reset-button" @click="savePengyou">
                    <u-icon name="/static/common/a_share_pengyou.png" size="40"></u-icon>
                    <view class="text">朋友圈</view>
                </button> -->
            </view>
            <view class="safe-area-inset-bottom"><u-gap height="130rpx" bgColor="white"></u-gap></view>
        </view>
    </u-popup>
</template>

<script setup>
import { ref } from 'vue';
const share_show = defineModel();
const props = defineProps(['share_img']);
const SystemInfo = uni.getSystemInfoSync();
const save2 = async () => {
    const img_info = await getImageInfo(props.share_img);
    uni.$getSettingCallback({ auth_text: 'scope.writePhotosAlbum', tips: '需要您授权保存相册' }).then((atiem) => {
        uni.saveImageToPhotosAlbum({
            filePath: img_info.path,
            success(res) {
                uni.showToast({
                    title: '保存成功!',
                    icon: 'success'
                });
            },
            fail: function (err) {}
        });
    });
};
const savaWeixin = async () => {
    const img_info = await getImageInfo(props.share_img);
    wx.showShareImageMenu({
        path: img_info.path
    });
};
const getImageInfo = (src) => {
    return new Promise((resolve, reject) => {
        uni.getImageInfo({
            src,
            success: (res) => {
                resolve(res);
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
};
</script>

<style lang="scss">
.uni-share-con {
    // background: transparent;
}

.sharebutton2 {
    margin-top: 5px;
    background-color: #f79d45;
    border-radius: 4px;
    color: white;
    font-size: 16px;
}

.flex_button {
    margin-top: 10px;
    display: flex;
    height: 50px;
    background-color: white;
    border-radius: 8rpx;
    align-items: center;

    image {
        width: 67rpx;
        height: 74rpx;
    }
}

.sharebutton2 {
    font-size: 16px;
    background: transparent;
}

.flex-c-c {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixedbottom {
    background-color: white;
    border-radius: 16rpx 16rpx 0 0;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    button {
        flex-direction: column;
    }

    .text {
        font-size: 28rpx;
        color: #333;
        text-align: center;
    }
}
</style>
